---
title: Menyvalg
image: /images/user-guide/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

Et allsidig menyvalg designet for bruk i en meny eller navigeringsliste.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| <span>Egenskaper</span> | Type                  | Beskrivelse                                                                                                                           |
| ----------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| "VenstreIkon"           | "IkonKomponent"       | "Et valgfritt venstre ikon som vises før teksten i menyvalget"                                                                        |
| fremhevelse             | <span>streng</span>   | Angir fremhevingsfargen for menyvalget. Alternativer inkluderer: `default`, `danger` og `placeholder` |
| tekst                   | <span>streng</span>   | "Tekstinnholdet i menyvalget"                                                                                                         |
| ikonknapper             | array                 | An array of objects representing additional icon buttons associated with the menu item                                                |
| erVerktøytipsÅpen       | <span>boolean</span>  | Kontrollerer synligheten av verktøytipset knyttet til menyvalget                                                                      |
| "testId"                | <span>streng</span>   | "Data-testid-attributtet for testformål"                                                                                              |
| "onClick"               | <span>funksjon</span> | Tilbakekallingsfunksjon utløst når menyvalget klikkes                                                                                 |
| "klasseNavn"            | <span>streng</span>   | "Valgfritt navn for ekstra styling"                                                                                                   |

</Tab>
</Tabs>

## Varianter

De ulike variantene av menyvalgkomponenten inkluderer følgende:

### Kommando

Et kommando-stil menyvalg i en meny for å indikere hurtigtaster.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| <span>Egenskaper</span> | Type                  | Beskrivelse                                                    |
| ----------------------- | --------------------- | -------------------------------------------------------------- |
| "VenstreIkon"           | "IkonKomponent"       | "Et valgfritt venstre ikon som vises før teksten i menyvalget" |
| tekst                   | <span>streng</span>   | "Tekstinnholdet i menyvalget"                                  |
| førsteHurtigtast        | <span>streng</span>   | Den første hurtigtasten tilknyttet kommandoen                  |
| andreHurtigtast         | <span>streng</span>   | Den andre hurtigtasten tilknyttet kommandoen                   |
| erValgt                 | <span>boolean</span>  | Angir om menyvalget er valgt eller uthevet                     |
| "onClick"               | <span>funksjon</span> | Tilbakekallingsfunksjon utløst når menyvalget klikkes          |
| "klasseNavn"            | <span>streng</span>   | "Valgfritt navn for ekstra styling"                            |

</Tab>
</Tabs>

### Draggable

En dra-og-slipp-menyvalgs komponent designet for bruk i menyer eller lister der elementer kan dras, og flere handlinger kan utføres via ikonknapper.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| <span>Egenskaper</span> | Type                  | Beskrivelse                                                                                                |
| ----------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------- |
| "VenstreIkon"           | "IkonKomponent"       | "Et valgfritt venstre ikon som vises før teksten i menyvalget"                                             |
| fremhevelse             | <span>streng</span>   | The accent color of the menu item. It can either be `default`, `placeholder`, and `danger` |
| ikonknapper             | array                 | An array of objects representing additional icon buttons associated with the menu item                     |
| erVerktøytipsÅpen       | <span>boolean</span>  | Kontrollerer synligheten av verktøytipset knyttet til menyvalget                                           |
| "onClick"               | <span>funksjon</span> | Tilbakekallingsfunksjon utløst når menyobjektet klikkes                                                    |
| tekst                   | <span>streng</span>   | "Tekstinnholdet i menyvalget"                                                                              |
| erDragDeaktivert        | boolean               | Angir om dra-funksjonen er deaktivert                                                                      |
| "klasseNavn"            | <span>streng</span>   | "Valgfritt navn for ekstra styling"                                                                        |

</Tab>
</Tabs>

### Flervalg

Tilbyr en måte å implementere flervalgfunksjonalitet med en assosiert avmerkingsboks.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| <span>Egenskaper</span> | Type                  | Beskrivelse                                                        |
| ----------------------- | --------------------- | ------------------------------------------------------------------ |
| "VenstreIkon"           | "IkonKomponent"       | "Et valgfritt venstre ikon som vises før teksten i menyvalget"     |
| tekst                   | <span>streng</span>   | "Tekstinnholdet i menyvalget"                                      |
| "valgt"                 | boolean               | "Angir om menyvalget er valgt (avmerket)"       |
| onColSelectEndring      | <span>funksjon</span> | Tilbakekallingsfunksjon utløst når avmerkingsbokstilstanden endres |
| "klasseNavn"            | <span>streng</span>   | "Valgfritt navn for ekstra styling"                                |

</Tab>
</Tabs>

### Flervalg Avatar

Et flervalgmenyvalg med en avatar, en avmerkingsboks for valg og tekstinnhold.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| <span>Egenskaper</span> | Type                  | Beskrivelse                                                        |
| ----------------------- | --------------------- | ------------------------------------------------------------------ |
| "avatar"                | `ReactNode`           | "Avatar eller ikon som skal vises på venstre side av menyvalget"   |
| tekst                   | <span>streng</span>   | "Tekstinnholdet i menyvalget"                                      |
| "valgt"                 | <span>boolean</span>  | "Angir om menyvalget er valgt (avmerket)"       |
| onColSelectEndring      | <span>funksjon</span> | Tilbakekallingsfunksjon utløst når avmerkingsbokstilstanden endres |
| "klasseNavn"            | <span>streng</span>   | "Valgfritt navn for ekstra styling"                                |

</Tab>
</Tabs>

### Navigere

A menu item featuring an optional left icon, textual content, and a right-chevron icon.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| <span>Egenskaper</span> | Type                  | Beskrivelse                                                    |
| ----------------------- | --------------------- | -------------------------------------------------------------- |
| "VenstreIkon"           | "IkonKomponent"       | "Et valgfritt venstre ikon som vises før teksten i menyvalget" |
| tekst                   | <span>streng</span>   | "Tekstinnholdet i menyvalget"                                  |
| "onClick"               | <span>funksjon</span> | "Tilbakekallingsfunksjon utløst når menyvalget klikkes"        |
| "klasseNavn"            | <span>streng</span>   | "Valgfritt navn for ekstra styling"                            |

</Tab>
</Tabs>

### Velg

A selectable menu item, featuring optional left content (icon and text) and an indicator (check icon) for the selected state.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| <span>Egenskaper</span> | Type                  | Beskrivelse                                                    |
| ----------------------- | --------------------- | -------------------------------------------------------------- |
| "VenstreIkon"           | "IkonKomponent"       | "Et valgfritt venstre ikon som vises før teksten i menyvalget" |
| tekst                   | <span>streng</span>   | "Tekstinnholdet i menyvalget"                                  |
| "valgt"                 | boolean               | "Angir om menyvalget er valgt (avmerket)"   |
| "deaktivert"            | <span>boolean</span>  | "Angir om menyvalget er deaktivert"                            |
| "hovered"               | <span>boolean</span>  | "Angir om menyvalget for øyeblikket blir hoveret over"         |
| "onClick"               | <span>funksjon</span> | "Tilbakekallingsfunksjon utløst når menyvalget klikkes"        |
| "klasseNavn"            | <span>streng</span>   | "Valgfritt navn for ekstra styling"                            |

</Tab>
</Tabs>

### "Velg Avatar"

"Et valgfritt menyvalg med en avatar, med valgfritt innhold til venstre (avatar og tekst) og en indikator (sjekkikon) for valgt tilstand."

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| <span>Egenskaper</span> | Type                  | Beskrivelse                                                      |
| ----------------------- | --------------------- | ---------------------------------------------------------------- |
| "avatar"                | `ReactNode`           | "Avatar eller ikon som skal vises på venstre side av menyvalget" |
| tekst                   | <span>streng</span>   | "Tekstinnholdet i menyvalget"                                    |
| "valgt"                 | <span>boolean</span>  | "Angir om menyvalget er valgt (avmerket)"     |
| deaktivert              | <span>boolean</span>  | "Angir om menyvalget er deaktivert"                              |
| "hovered"               | <span>boolean</span>  | "Angir om menyvalget for øyeblikket blir hoveret over"           |
| "testId"                | <span>streng</span>   | "Data-testid-attributtet for testformål"                         |
| "onClick"               | <span>funksjon</span> | "Tilbakekallingsfunksjon utløst når menyvalget klikkes"          |
| "klasseNavn"            | <span>streng</span>   | "Valgfritt navn for ekstra styling"                              |

</Tab>
</Tabs>

### "Velg Farge"

"Et valgfritt menyvalg med en fargeprøve for scenarier der du ønsker at brukerne skal velge en farge fra en meny."

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| <span>Egenskaper</span> | Type                  | Beskrivelse                                                                                                                                                                                                                                       |
| ----------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| farge                   | <span>streng</span>   | "Tema fargen som skal vises som en prøve i menyvalget." "Alternativer inkluderer: \"grønn\", \"turkis\", \"himmel\", \"blå\", \"lilla\", \"rosa\", \"rød\", \"oransje\", \"gul\", og \"grå\"" |
| "valgt"                 | boolean               | "Angir om menyvalget er valgt (avmerket)"                                                                                                                                                                                      |
| "deaktivert"            | boolean               | "Angir om menyvalget er deaktivert"                                                                                                                                                                                                               |
| "hovered"               | <span>boolean</span>  | "Angir om menyvalget for øyeblikket blir hoveret over"                                                                                                                                                                                            |
| "variant"               | <span>streng</span>   | "Varianten av fargeprøven." "Det kan enten være \"default\" eller \"pipeline\""                                                                                                                                               |
| "onClick"               | <span>funksjon</span> | "Tilbakekallingsfunksjon utløst når menyvalget klikkes"                                                                                                                                                                                           |
| "klasseNavn"            | <span>streng</span>   | "Valgfritt navn for ekstra styling"                                                                                                                                                                                                               |

</Tab>
</Tabs>

### "Veksle"

"Et menyvalg med en tilhørende vekslebryter for å la brukerne aktivere eller deaktivere en spesifikk funksjon"

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| <span>Egenskaper</span>      | Type                  | Beskrivelse                                                              |
| ---------------------------- | --------------------- | ------------------------------------------------------------------------ |
| "VenstreIkon"                | "IkonKomponent"       | "Et valgfritt venstre ikon som vises før teksten i menyvalget"           |
| tekst                        | <span>streng</span>   | "Tekstinnholdet i menyvalget"                                            |
| "vekslet"                    | boolean               | "Angir om vekslebryteren er i \"på\" eller \"av\" tilstand"          |
| "onToggleChange"             | <span>funksjon</span> | "Tilbakekallingsfunksjon utløst når vekslebryterens tilstand endrer seg" |
| <span>veksleStørrelse</span> | <span>streng</span>   | Størrelsen på vekslebryteren. Du kan enten \            |
| "klasseNavn"                 | <span>streng</span>   | "Valgfritt navn for ekstra styling"                                      |

</Tab>
</Tabs>
